<template>
	<view>
		<view class="home_tab">
			<view class="home_tab_title">
				<view class="title_inner">
					<uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" style-type="text"
					 active-color="#d4237a"></uni-segmented-control>
				</view>
				<view class="iconfont iconsearch"></view>
			</view>
			<view class="home_tab_content">
				<view v-if="current < 4">
					<vediomain :urlobj="{url:items[current].url,params:items[current].params}"></vediomain>
				</view>
				<view v-else-if="current === 4">
					<vediocategory></vediocategory>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	import vediomain from './vedio-main/index.vue'
	import vediocategory from './vedio-category/index.vue'
	export default {
		components: {
			uniSegmentedControl,
			vediomain,
			vediocategory
		},
		data() {
			return {
				items: [{
						title: '推荐',
						url: 'http://157.122.54.189:9088/videoimg/v1/videowp/featured',
						params: {
							limit: 30,
							order: 'hot',
							skip: 0
						}
					},
					{
						title: '娱乐',
						url: 'http://157.122.54.189:9088/videoimg/v1/videowp/category/59b25abbe7bce76bc834198a',
						params: {
							limit: 30,
							order: 'new',
							skip: 0
						}
					},
					{
						title: '最新',
						url: 'http://157.122.54.189:9088/videoimg/v1/videowp/videowp',
						params: {
							limit: 30,
							order: 'new',
							skip: 0
						}
					},
					{
						title: '热门',
						url: 'http://157.122.54.189:9088/videoimg/v1/videowp/videowp',
						params: {
							limit: 30,
							order: 'hot',
							skip: 0
						}
					},
					{
						title: '分类',
						url: 'http://157.122.54.189:9088/videoimg/v1/videowp/category',
						params: {
							img: '',
							name: ''
						}
					}
				],
				current: 0
			}
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index.currentIndex) {
					this.current = index.currentIndex;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home_tab {
		.home_tab_title {
			position: relative;

			.title_inner {
				width: 60%;
				margin: 0 auto;
			}

			.iconsearch {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 5%;
			}
		}

		.home_tab_content {}
	}
</style>
